<template>
  <div class="join">
    <div class="bg-dark text-white font-sans">
      <!-- 公司简介 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 class="text-3xl md:text-4xl font-bold mb-6">关于狂速科技<span class="text-primary">SAAS</span></h2>
              <p class="text-gray-300 mb-6 leading-relaxed">
                狂速科技SAAS成立于2018年，是一家专注于为中小企业提供数字化转型解决方案的高科技企业。我们的使命是通过技术创新，帮助中小企业降低技术门槛，提升运营效率，实现数字化转型。
              </p>
              <p class="text-gray-300 mb-6 leading-relaxed">
                公司自成立以来，始终坚持"以客户为中心，以技术为驱动"的发展理念，不断推出符合市场需求的创新产品和服务。目前，我们的产品已经覆盖电商、餐饮、教育、酒店、美业等多个行业，服务客户超过1500家。
              </p>
              <p class="text-gray-300 mb-8 leading-relaxed">
                我们拥有一支充满激情和创新精神的团队，团队成员来自于知名互联网企业和科技公司。在这里，你将有机会与行业精英一起工作，共同成长。我们提供有竞争力的薪酬福利、良好的工作环境和广阔的发展空间，期待你的加入！
              </p>

              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                <div class="bg-card rounded-lg p-4 text-center">
                  <div class="text-3xl font-bold text-primary mb-2" id="counter-clients">0</div>
                  <div class="text-gray-400 text-sm">客户数量</div>
                </div>
                <div class="bg-card rounded-lg p-4 text-center">
                  <div class="text-3xl font-bold text-primary mb-2" id="counter-projects">0</div>
                  <div class="text-gray-400 text-sm">成功项目</div>
                </div>
                <div class="bg-card rounded-lg p-4 text-center">
                  <div class="text-3xl font-bold text-primary mb-2" id="counter-platforms">0</div>
                  <div class="text-gray-400 text-sm">支持平台</div>
                </div>
                <div class="bg-card rounded-lg p-4 text-center">
                  <div class="text-3xl font-bold text-primary mb-2" id="counter-team">0</div>
                  <div class="text-gray-400 text-sm">团队规模</div>
                </div>
              </div>

              <a href="#job-listings"
                 class="inline-flex items-center px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                查看职位空缺 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>

            <div class="relative">
              <img src="https://picsum.photos/600/700?random=301" alt="公司办公环境"
                   class="w-full h-auto rounded-xl shadow-xl">

              <!-- 装饰元素 -->
              <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-primary/20 rounded-full blur-2xl"></div>
              <div class="absolute -top-6 -left-6 w-20 h-20 bg-secondary/20 rounded-full blur-xl"></div>

              <!-- 浮动卡片 -->
              <div class="absolute -bottom-8 -left-8 bg-card rounded-lg p-6 shadow-xl max-w-xs animate-float">
                <div class="flex items-center mb-4">
                  <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                    <i class="fa fa-trophy text-xl"></i>
                  </div>
                  <div class="ml-4">
                    <h4 class="font-bold">行业认可</h4>
                    <p class="text-gray-400 text-sm">连续两年获得行业最佳创新企业</p>
                  </div>
                </div>
              </div>

              <div class="absolute -top-8 -right-8 bg-card rounded-lg p-6 shadow-xl max-w-xs animate-float"
                   style="animation-delay: 2s;">
                <div class="flex items-center mb-4">
                  <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                    <i class="fa fa-users text-xl"></i>
                  </div>
                  <div class="ml-4">
                    <h4 class="font-bold">团队文化</h4>
                    <p class="text-gray-400 text-sm">开放、创新、协作、共赢</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 企业文化 -->
      <section class="py-20 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">我们的<span class="text-primary">文化</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              狂速科技SAAS拥有独特的企业文化，我们致力于为员工创造一个积极向上、充满活力的工作环境
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- 文化项1 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div
                  class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                <i class="fa fa-lightbulb-o"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">创新驱动</h3>
              <p class="text-gray-400">
                我们鼓励创新思维，不断探索新技术、新方法，为客户提供更优质的产品和服务。
              </p>
            </div>

            <!-- 文化项2 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div
                  class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                <i class="fa fa-users"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">团队协作</h3>
              <p class="text-gray-400">
                我们相信团队的力量大于个人，通过协作和沟通，共同实现公司和个人的目标。
              </p>
            </div>

            <!-- 文化项3 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div
                  class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                <i class="fa fa-rocket"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">追求卓越</h3>
              <p class="text-gray-400">
                我们追求卓越的产品品质和服务水平，不断挑战自我，超越客户期望。
              </p>
            </div>

            <!-- 文化项4 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div
                  class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                <i class="fa fa-balance-scale"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">平衡发展</h3>
              <p class="text-gray-400">
                我们注重员工的工作与生活平衡，提供良好的工作环境和发展机会，让员工在实现职业目标的同时，享受美好生活。
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- 福利待遇 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">我们的<span class="text-primary">福利</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              狂速科技SAAS提供有竞争力的薪酬和完善的福利体系，让每一位员工都能感受到公司的关怀和支持
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 福利项1 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex items-center mb-6">
                <div
                    class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xl mr-4">
                  <i class="fa fa-money"></i>
                </div>
                <h3 class="text-xl font-bold">有竞争力的薪酬</h3>
              </div>
              <p class="text-gray-400">
                我们提供行业内有竞争力的薪资待遇，根据个人能力和表现给予相应的薪酬调整和奖金激励。
              </p>
            </div>

            <!-- 福利项2 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex items-center mb-6">
                <div
                    class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xl mr-4">
                  <i class="fa fa-heartbeat"></i>
                </div>
                <h3 class="text-xl font-bold">全面的保险</h3>
              </div>
              <p class="text-gray-400">
                我们为员工提供五险一金，额外补充商业保险，包括医疗保险、意外险等，全方位保障员工的健康和安全。
              </p>
            </div>

            <!-- 福利项3 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex items-center mb-6">
                <div
                    class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xl mr-4">
                  <i class="fa fa-graduation-cap"></i>
                </div>
                <h3 class="text-xl font-bold">学习与发展</h3>
              </div>
              <p class="text-gray-400">
                我们提供丰富的培训课程和学习资源，鼓励员工不断学习和成长，为员工提供广阔的职业发展空间。
              </p>
            </div>

            <!-- 福利项4 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex items-center mb-6">
                <div
                    class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xl mr-4">
                  <i class="fa fa-coffee"></i>
                </div>
                <h3 class="text-xl font-bold">舒适的工作环境</h3>
              </div>
              <p class="text-gray-400">
                我们提供现代化的办公设施，舒适的工作环境，定期组织团队活动，营造轻松愉快的工作氛围。
              </p>
            </div>

            <!-- 福利项5 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex items-center mb-6">
                <div
                    class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xl mr-4">
                  <i class="fa fa-calendar"></i>
                </div>
                <h3 class="text-xl font-bold">灵活的假期</h3>
              </div>
              <p class="text-gray-400">
                我们提供带薪年假、病假、婚假、产假等法定假期，同时还提供灵活的调休制度，让员工能够平衡工作和生活。
              </p>
            </div>

            <!-- 福利项6 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex items-center mb-6">
                <div
                    class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xl mr-4">
                  <i class="fa fa-gift"></i>
                </div>
                <h3 class="text-xl font-bold">节日福利</h3>
              </div>
              <p class="text-gray-400">
                我们为员工提供丰富的节日礼品和生日福利，定期组织团队聚餐、旅游等活动，让员工感受到家的温暖。
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- 职位列表 -->
      <section id="job-listings" class="py-20 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">职位<span class="text-primary">空缺</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              以下是我们目前正在招聘的职位，如果你认为自己是合适的人选，请提交您的简历
            </p>
          </div>

          <!-- 职位筛选 -->
          <div class="flex flex-wrap justify-center gap-4 mb-8">
            <button class="px-4 py-2 rounded-md bg-primary hover:bg-secondary text-white font-medium">全部职位</button>
            <button class="px-4 py-2 rounded-md bg-card hover:bg-primary text-white font-medium">技术类</button>
            <button class="px-4 py-2 rounded-md bg-card hover:bg-primary text-white font-medium">设计类</button>
            <button class="px-4 py-2 rounded-md bg-card hover:bg-primary text-white font-medium">市场类</button>
            <button class="px-4 py-2 rounded-md bg-card hover:bg-primary text-white font-medium">运营类</button>
          </div>

          <!-- 职位列表 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 职位项1 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold">前端开发工程师</h3>
                <div class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">技术类</div>
              </div>
              <p class="text-gray-400 mb-6">
                负责公司前端产品的开发和维护，参与产品的需求分析和设计，与后端团队协作完成项目开发。
              </p>
              <div class="flex items-center space-x-4 text-sm text-gray-400">
                <div class="flex items-center">
                  <i class="fa fa-map-marker mr-1"></i> 北京
                </div>
                <div class="flex items-center">
                  <i class="fa fa-briefcase mr-1"></i> 3-5年
                </div>
                <div class="flex items-center">
                  <i class="fa fa-yen mr-1"></i> 20-35K
                </div>
              </div>
              <a href="#apply"
                 class="mt-6 inline-block px-6 py-2 bg-primary rounded-md text-white font-medium hover:bg-secondary transition-colors">
                立即申请 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>

            <!-- 职位项2 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold">后端开发工程师</h3>
                <div class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">技术类</div>
              </div>
              <p class="text-gray-400 mb-6">
                负责公司后端系统的设计和开发，优化系统性能，保障系统的稳定性和安全性。
              </p>
              <div class="flex items-center space-x-4 text-sm text-gray-400">
                <div class="flex items-center">
                  <i class="fa fa-map-marker mr-1"></i> 上海
                </div>
                <div class="flex items-center">
                  <i class="fa fa-briefcase mr-1"></i> 2-4年
                </div>
                <div class="flex items-center">
                  <i class="fa fa-yen mr-1"></i> 18-30K
                </div>
              </div>
              <a href="#apply"
                 class="mt-6 inline-block px-6 py-2 bg-primary rounded-md text-white font-medium hover:bg-secondary transition-colors">
                立即申请 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>

            <!-- 职位项3 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold">UI设计师</h3>
                <div class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">设计类</div>
              </div>
              <p class="text-gray-400 mb-6">
                负责公司产品的界面设计和交互设计，提升产品的用户体验，与开发团队紧密合作。
              </p>
              <div class="flex items-center space-x-4 text-sm text-gray-400">
                <div class="flex items-center">
                  <i class="fa fa-map-marker mr-1"></i> 深圳
                </div>
                <div class="flex items-center">
                  <i class="fa fa-briefcase mr-1"></i> 2-5年
                </div>
                <div class="flex items-center">
                  <i class="fa fa-yen mr-1"></i> 15-25K
                </div>
              </div>
              <a href="#apply"
                 class="mt-6 inline-block px-6 py-2 bg-primary rounded-md text-white font-medium hover:bg-secondary transition-colors">
                立即申请 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>

            <!-- 职位项4 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold">市场专员</h3>
                <div class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">市场类</div>
              </div>
              <p class="text-gray-400 mb-6">
                负责公司产品的市场推广和品牌建设，制定市场策略，分析市场数据。
              </p>
              <div class="flex items-center space-x-4 text-sm text-gray-400">
                <div class="flex items-center">
                  <i class="fa fa-map-marker mr-1"></i> 广州
                </div>
                <div class="flex items-center">
                  <i class="fa fa-briefcase mr-1"></i> 1-3年
                </div>
                <div class="flex items-center">
                  <i class="fa fa-yen mr-1"></i> 12-20K
                </div>
              </div>
              <a href="#apply"
                 class="mt-6 inline-block px-6 py-2 bg-primary rounded-md text-white font-medium hover:bg-secondary transition-colors">
                立即申请 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>

            <!-- 职位项5 -->
            <div class="bg-card rounded-xl p-8 hover-lift">
              <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold">运营经理</h3>
                <div class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">运营类</div>
              </div>
              <p class="text-gray-400 mb-6">
                负责公司产品的运营管理，制定运营策略，提升产品的用户活跃度和留存率。
              </p>
              <div class="flex items-center space-x-4 text-sm text-gray-400">
                <div class="flex items-center">
                  <i class="fa fa-map-marker mr-1"></i> 杭州
                </div>
                <div class="flex items-center">
                  <i class="fa fa-briefcase mr-1"></i> 5-8年
                </div>
                <div class="flex items-center">
                  <i class="fa fa-yen mr-1"></i> 30-50K
                </div>
              </div>
              <a href="#apply"
                 class="mt-6 inline-block px-6 py-2 bg-primary rounded-md text-white font-medium hover:bg-secondary transition-colors">
                立即申请 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>
          </div>

          <div class="text-center mt-12">
            <a href="#" class="text-primary hover:underline">查看更多职位</a>
          </div>
        </div>
      </section>

      <!-- 申请流程 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">申请<span class="text-primary">流程</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              只需简单几步，即可提交您的申请，加入我们的团队
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <!-- 步骤1 -->
            <div class="text-center">
              <div class="relative mb-8">
                <div
                    class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto text-primary text-2xl">
                  <i class="fa fa-file-text-o"></i>
                </div>
                <div class="progress-line absolute top-1/2 left-full w-full h-1 md:hidden"></div>
              </div>
              <h3 class="text-xl font-bold mb-3">提交简历</h3>
              <p class="text-gray-400">
                在职位列表中选择您感兴趣的职位，点击"立即申请"按钮，填写个人信息并上传简历。
              </p>
            </div>

            <!-- 步骤2 -->
            <div class="text-center">
              <div class="relative mb-8">
                <div
                    class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto text-primary text-2xl">
                  <i class="fa fa-phone"></i>
                </div>
                <div class="progress-line absolute top-1/2 left-full w-full h-1 md:hidden"></div>
              </div>
              <h3 class="text-xl font-bold mb-3">电话面试</h3>
              <p class="text-gray-400">
                我们的HR会在收到您的申请后尽快与您联系，进行初步的电话沟通。
              </p>
            </div>

            <!-- 步骤3 -->
            <div class="text-center">
              <div class="relative mb-8">
                <div
                    class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto text-primary text-2xl">
                  <i class="fa fa-users"></i>
                </div>
                <div class="progress-line absolute top-1/2 left-full w-full h-1 md:hidden"></div>
              </div>
              <h3 class="text-xl font-bold mb-3">现场面试</h3>
              <p class="text-gray-400">
                如果电话面试通过，我们将邀请您到公司进行现场面试，与团队成员面对面交流。
              </p>
            </div>

            <!-- 步骤4 -->
            <div class="text-center">
              <div class="relative mb-8">
                <div
                    class="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto text-primary text-2xl">
                  <i class="fa fa-check"></i>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-3">入职入职</h3>
              <p class="text-gray-400">
                通过面试后，我们将为您发送录用通知，欢迎您正式加入狂速科技SAAS团队！
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- 申请表单 -->
      <section id="apply" class="py-20 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">提交<span class="text-primary">申请</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              请填写以下信息，我们将尽快与您联系
            </p>
          </div>

          <div class="max-w-3xl mx-auto">
            <form action="#" class="bg-card rounded-xl p-8 space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label for="name" class="block text-gray-400 mb-2">姓名</label>
                  <input type="text" id="name"
                         class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                         required>
                </div>
                <div>
                  <label for="email" class="block text-gray-400 mb-2">邮箱</label>
                  <input type="email" id="email"
                         class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                         required>
                </div>
              </div>

              <div>
                <label for="phone" class="block text-gray-400 mb-2">手机号码</label>
                <input type="tel" id="phone"
                       class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                       required>
              </div>

              <div>
                <label for="position" class="block text-gray-400 mb-2">申请职位</label>
                <select id="position"
                        class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        required>
                  <option value="">请选择职位</option>
                  <option value="frontend-developer">前端开发工程师</option>
                  <option value="backend-developer">后端开发工程师</option>
                  <option value="ui-designer">UI设计师</option>
                  <option value="marketing-specialist">市场专员</option>
                  <option value="operations-manager">运营经理</option>
                </select>
              </div>

              <div>
                <label for="resume" class="block text-gray-400 mb-2">上传简历</label>
                <input type="file" id="resume"
                       class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                       accept=".pdf,.doc,.docx" required>
              </div>

              <div>
                <label for="cover-letter" class="block text-gray-400 mb-2">求职信</label>
                <textarea id="cover-letter" rows="6"
                          class="w-full px-4 py-3 bg-dark border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
              </div>

              <div class="text-center">
                <button type="submit"
                        class="inline-flex items-center px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                  提交申请 <i class="fa fa-arrow-right ml-2"></i>
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>

    </div>
  </div>
</template>

<script>
export default {
  layout: "default",
  name: 'JoinView',
  data() {
    return {
      isMobileMenuOpen: false,
      progress: 0,
      counterClients: 0,
      counterProjects: 0,
      counterPlatforms: 0,
      counterTeam: 0
    };
  },
  mounted() {
    window.addEventListener('scroll', this.updateProgress);
    this.animateCounter('counterClients', 1500, 2000);
    this.animateCounter('counterProjects', 800, 2000);
    this.animateCounter('counterPlatforms', 5, 2000);
    this.animateCounter('counterTeam', 200, 2000);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.updateProgress);
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    updateProgress() {
      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    },
    animateCounter(targetId, endValue, duration) {
      // const element = this[targetId];
      // const startValue = 0;
      const startTime = performance.now();

      const updateCounter = (currentTime) => {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        this[targetId] = Math.floor(progress * endValue);

        if (progress < 1) {
          requestAnimationFrame(updateCounter);
        }
      };

      requestAnimationFrame(updateCounter);
    }
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }

  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-15px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
}

:root {
  --primary: #48b6ff;
  --secondary: #2e6cf1;
  --dark: #080812;
  --darker: #04040a;
  --card: #1a1a31;
}

body {
  background-color: var(--dark);
  color: white;
  font-family: 'Segoe UI', sans-serif;
}

/* 其他样式可按需添加 */
</style>
